<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息提示页面</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <style>
        .pic {
            width: 40px;
            height: 40px;
        }

        .myli {
            font-size: 45px;
            color: #FF5722;
            margin-top: 20px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
<!-- top1  个人中心-->
<header>
    <div class="top center">
        <div class="right fr">
            {% if user %}
                <a href="{{ url_for('user.userInfo') }}">
                    <div class="gouwuche fr">个人中心</div>
                </a>
            {% else %}
                <div class="fr">
                    <ul>
                        <li><a href="{{ url_for('user.login') }}" target="_blank">登录</a></li>
                        <li>|</li>
                        <li><a href="{{ url_for('user.register') }}" target="_blank">注册</a></li>
                    </ul>
                </div>
            {% endif %}

            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--end header -->

<!-- top2 search-->
<div class="banner_x center">
    <a href="{{ url_for('user.index') }}" taget="_blank">
        <i class="layui-icon layui-icon-home fl myli"></i>
    </a>
    <div class="nav fl">
        <ul style="margin-left:50px;">
            <li><a href="/user/itemList/手机">手机</a></li>
            <li><a href="/user/itemList/电脑平板">电脑平板</a></li>
            <li><a href="/user/itemList/服饰鞋包">服饰鞋包</a></li>
            <li><a href="/user/itemList/二手书籍">二手书籍</a></li>
            <li><a href="/user/itemList/家居家电">家居家电</a></li>
            <li><a href="/user/itemList/生活百货">生活百货</a></li>
            <li><a href="/user/itemList/健身器材">健身器材</a></li>
            <li><a href="/user/itemList/智能硬件">智能硬件</a></li>
            <li><a href="/user/itemList/nearby">同城</a></li>
        </ul>
    </div>
    <!--search 框-->
    <div class="search fr">
        <form action="{{ url_for('user.search') }}" method="post">
            <div class="text fl">
                <input type="text" class="shuru" name="search" placeholder="请输入需要的商品">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<hr class="layui-bg-red">
<div style="width: 200px;margin-left:90px;float: left; border-right:3px solid coral">
    {% if itemList %}
        {% for item in itemList %}
            <!-- 将聊天界面加载在main|div中--->
            <a href="/user/sellChat/{{ item.item_id }}" target="main"
               onclick="$('#main').load(this.href);return false;loadMsg()">
                <img src="{{ item.pic1 }}" style="width: 50px;height: 50px">
                {{ item.itemName }}
                </br>
            </a>
        {% endfor %}
    {% endif %}
</div>
<div id="main" style="float: left">

</div>

<div style="width: 100px;height: 80px">
</div>
<footer class="mt20 center layui-bg-black" style="margin-top: 80px;clear: both">
    <div class="copyright">
        <h2>易淘二手商城版权所有</h2>
    </div>
</footer>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/js/socket.io.js"></script>
<script>
    $(document).ready(function () {
        loadMsg();
        namespace = '/abcd';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('response', function (res) {
            console.log(res);
            var msg = res.msg;
            var name = res.name;
            var item_id = res.item_id;
            var cur_id ={{ item.item_id}};
            if (msg && cur_id == item_id) {
                $("#t").append("<img src=" + name + " class='pic'>").append(':&nbsp;&nbsp;').append(msg).append('<br/>');

                $("#t").append("<div style='height:20px;width: 200px' ></div>")
            }
        });
    });

    function loadMsg() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/user/loadMsg/{{ item.item_id }}",
            success: function (result) {
                var data = result.data;
                console.log(result.Code);
                console.log(data);
                var msgs = data.msgs;
                console.log(msgs)

                if (result.Code == 200) {
                    console.log(msgs[0].msg)
                    for (var i = 0; i < msgs.length; i++) {
                        var name = msgs[i].name;
                        var cur_id ={{ item.item_id }};
                        var item_id = msgs[i].item_id;
                        if (cur_id == item_id) {
                            $("#t").append("<img src=" + name + " class='pic'>").append(':').append(msgs[i].msg).append('<br/>');
                        }
                    }
                };
                if (result.Code == 500) {
                    alert('加载失败！')
                };
            },
            error: function () {
                console.log("异常！")
            }
        });
    }

    function chatMsg() {

    }

    function sendMsg() {
        namespace = '/abcd';
        var msg = $('#input').val();
        var item_id ={{ item.item_id }};
        var user1_id ={{ user.user_id }};
        var data = {'item_id': item_id, 'msg': msg, 'user1_id': user1_id};
        console.log(data)
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function () {
            if (msg) {
                socket.emit('my event', data);
            }
        });
    }
</script>
</body>
</html>